<template>
  <div class="goods-con">
    <div class="good-con-list">
      <div class="demo-upload-list" v-if="data.datalist.length>0" v-for="item in data.datalist">
        <template>
          <img :src="item.pic">
          <div class="demo-upload-list-cover">
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
          </div>
          
        </template>
      </div>
      <div class="demo-upload-list" @click="getgoods">
          <template>
              <Icon type="md-add-circle" color="#0ff" size="40"/>
        </template>
      </div>
    </div>
    <div class="goods-con-contro">
         <RadioGroup v-model="data.type">
            <Radio label="1" >大图</Radio>
            <Radio label="2">小图</Radio>
            <Radio label="3">列表</Radio>
        </RadioGroup>
    </div>
    <div class="good-con-detai">
        <p><Checkbox v-model="data.showtitle">显示商品名</Checkbox></p>
        <p><Checkbox v-model="data.showprice">显示价格</Checkbox></p>
        <p><Checkbox v-model="data.showintro" v-if="data.type!=2">显示简介</Checkbox></p>
    </div>
    <Modal v-model="modal2" width="600">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>商品管理</span>
            </p>
            <div style="text-align:center">
               <TheGood @on-change="goodchengs" />
            </div>
            <div slot="footer">
             12
            </div>
        </Modal>
  </div>
</template>

<script>
import api from "../api"
import TheGood from "@/components/goodsselect"
export default {
   props:{
    data:{
      type:Object
    }
  },
  name: "HelloWorld",
  data() {
    return {
      modal2:false,
      msg: "Welcome to Your Vue.js App"
    }
  },
  methods:{
    goodchengs(e){
        this.modal2 = false;
      console.log(this.modal2)
      var data ={
        index:this.data.selfindex
      };
        data.goods = e
        this.$emit('on-change',data)
    },
    handleRemove(e){
      var list = this.data.datalist
            this.$Modal.confirm({
                    title: '确定删除',
                    onOk: () => {
                     this.data.datalist.splice(list.indexOf(e),1)
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });

    },
    getgoods(){
      var t = this;
      this.modal2 = true;
      console.log(this.modal2)
      // var data ={
      //   index:this.data.selfindex
      // };
      // api.getgoods({success:res=>{
      //   data.goods = res.data[0]
      //   t.$emit('on-change',data)
      // }})
    }
  },
    components:{
     TheGood,
    }
};
</script>
<style scoped>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>


